<template>
	<view class="container">
		<uni-easyinput v-model="register.phone" prefixIcon="person-filled" class="input-style" :placeholder="$t('login.userinput')"></uni-easyinput>
		<view class="email-box">
			<uni-easyinput v-model="register.email" prefixIcon="person-filled" class="input-style" :placeholder="$t('login.email')"></uni-easyinput>
			<view class="send-text" @click="onSendCode">
				<text v-if="codeMsg.count <= 0">{{ $t('login.getEmail') }}</text>
				<text v-else>{{ codeMsg.count }}S</text>
			</view>
		</view>
		<uni-easyinput v-model="register.newpassword" prefixIcon="locked-filled" type="password" :placeholder="$t('login.passwordNewInput')" style="margin-top: 10px"></uni-easyinput>
		<uni-easyinput
			v-model="register.repeatnewpassword"
			prefixIcon="locked-filled"
			type="password"
			:placeholder="$t('login.passwordNewRepeatInput')"
			style="margin-top: 10px"
		></uni-easyinput>

		<uni-easyinput v-model="register.code" :placeholder="$t('login.code')" style="margin-top: 10px; width: 50%"></uni-easyinput>
		<button style="margin-top: 10px" @click="onSubmit">{{ $t('submit.name') }}</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			register: {
				phone: '',
				email: '',
				newpassword: '',
				repeatnewpassword: '',
				code: ''
			},
			codeMsg: {
				time: 0,
				count: 0
			}
		};
	},
	methods: {
		getEmailCode() {
			return this.$request(this.$api.getEmailCode, {
				email: this.register.email
			})
				.then((res) => {
					console.log(res);
					const { code, msg } = res;
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					if (code == 1) return Promise.resolve(true);
					return Promise.reject(false);
				})
				.catch((res) => {
					console.log(res);
					return Promise.reject(false);
				});
		},
		async onSendCode() {
			if (!this.register.email) {
				uni.showToast({
					title: this.$t('login.email'),
					icon: 'none'
				});
				return;
			}
			if (this.codeMsg.count > 0) return;
			uni.showLoading({
				title: this.$t('system.loading'),
				mask: true
			});
			await this.getEmailCode();
			// uni.hideLoading()
			this.codeMsg.count = 60;
			this.codeMsg.time = setInterval(() => {
				this.codeMsg.count--;
				if (this.codeMsg.count <= 0) {
					clearInterval(this.codeMsg.time);
				}
			}, 1000);
		},
		onSubmit() {
			const { phone, email, newpassword, repeatnewpassword, code } = this.register;
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			if (!phone) {
				uni.showToast({
					title: this.$t('login.userinput'),
					icon: 'none'
				});
				return;
			}
			if (!email) {
				uni.showToast({
					title: this.$t('login.email'),
					icon: 'none'
				});
				return;
			}
			if (!emailRegex.test(email)) {
				uni.showToast({
					title: this.$t('login.verifyEmail'),
					icon: 'none'
				});
				return;
			}
			if (!newpassword) {
				uni.showToast({
					title: this.$t('login.passwordNewInput'),
					icon: 'none'
				});
				return;
			}
			if (!repeatnewpassword) {
				uni.showToast({
					title: this.$t('login.passwordNewRepeatInput'),
					icon: 'none'
				});
				return;
			}
			if (newpassword !== repeatnewpassword) {
				uni.showToast({
					title: this.$t('login.passwordInconsistency'),
					icon: 'none'
				});
				return;
			}
			if (!code) {
				uni.showToast({
					title: this.$t('login.code'),
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: this.$t('system.loading'),
				mask: true
			});
			this.$request(this.$api.forgetPassword, this.register)
				.then((res) => {
					const { code, msg } = res;
					
					console.log(code,msg);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					
					uni.hideLoading();
					if (code == 1) {
						setTimeout(()=>{
						 	// console.log(123);
							uni.navigateBack({
								delta: 1 ,// 返回的页面数，默认为1，表示返回到上一个页面
								animationType: 'pop-out',
								animationDuration: 200
							});
					   },2000);
					// 	this.messageToggle('success', '注册成功');
					} 
					//else {
					// 	this.messageToggle('error', res.msg);
					// }
				})
				.catch((err) => {
					console.log(err);
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.email-box {
		display: flex;
		align-items: center;
		margin-top: 10px;
		.send-text {
			font-size: 24rpx;
			margin-left: 10px;
		}
	}
}
</style>
